<template>
  <el-dialog
    :class="title ? 'line' : 'noline'"
    :show-close="showClose"
    custom-class="test-dialog"
    :title="title"
    :top="top"
    :visible.sync="isShow"
    :width="width"
    modal-append-to-body
    append-to-body
    destroy-on-close
    :close-on-click-modal="closeOnClickModal"
    @close="close"
  >
    <templateModal v-if="isShow" :params="params" @close="closeT" />
  </el-dialog>
</template>
<style lang="less" scope>
.line {
  .el-dialog__header {
    border-bottom: 1px solid #d7d2d2;
  }
}
.noline {
  .el-dialog__header {
    border-bottom: 0px;
    padding: 0;
  }
}
//去除动画
.dialog-fade-enter-active {
  animation: none;
}
.dialog-fade-leave-active {
  animation: none;
}

.dialog-fade-enter-active .el-dialog,
.dialog-fade-leave-active .el-dialog {
  animation-fill-mode: none;
}

.dialog-fade-enter-active .el-dialog {
  animation: none;
}

.dialog-fade-leave-active .el-dialog {
  animation: none;
}
</style>

<script type="text/babel">
export default {
  components: {
    templateModal: null
  },
  props: {
    top: {
      type: String,
      default: '10vh'
    },
    width: {
      type: String,
      default: '50%'
    },
    params: {
      type: Object,
      default: null
    },
    showClose: {
      type: Boolean,
      default: true
    },
    closeOnClickModal: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      propsParams: {},
      isShow: true,
      title: '',
      type: ''
    }
  },
  watch: {},
  mounted() {
    window.addEventListener('hashchange', this.reset)
  },
  beforeDestroy() {
    window.removeEventListener('hashchange', this.reset)
  },
  methods: {
    closeT(val) {
      if (val) {
        this.removeModal(this)
        this.isShow = false
        this.successCb(val, this)
        this.type = 'success'
      } else {
        this.removeModal(this)
        this.isShow = false
        this.closeCb(val, this)
        this.type = 'success'
      }
    },
    close(val) {
      if (this.type === 'success') {
        //
      } else {
        this.removeModal(this)
        this.closeCb(val, this)
      }
    },
    reset() {
      this.removeModal(this)
      this.isShow = false
      this.type = 'success'
    },
    success(data) {
      this.successCb(data, this)
    },
    fail(data) {
      this.failCb(data)
    },
    hide() {
      this.hideModal()
    },
    show() {
      this.showMdal()
    }
  }
}
</script>
<style lang="less">
.el-dialog__wrapper {
  height: 100%;
  overflow: auto !important;
}
.el-dialog {
  min-width: 800px;
  max-width: none;
  margin: 0 auto;
  margin-bottom: 0 !important;
  .el-dialog__body {
    padding: 0;
  }
}
</style>
